<template>
  <el-row >
        <el-col  :lg='{span:18,offset:2}'>
            <el-tabs  >
                  <el-tab-pane label="审批信息" name="first"></el-tab-pane>
            </el-tabs>

            <el-form  label-width="100px" align='left'  ref="form" :model='form' >
                  <el-form-item label="审批名称：" >
                      <span  v-if='type ==1 && isFirst==true'>立项申请 —</span>
                      <span  v-if='type ==2 && isFirst==true'>过会申请 —</span>
                      <span  v-if='type ==3 && isFirst==true'>协议用印申请 —</span>
                      <span  v-if='type ==4 && isFirst==true'>发行申请 —</span>
                      <!-- 项目名称 -->
                      <router-link  :to="{path:'/project/Detail',query:{code:isFirst==true? info_pro.code : info_pro.prjCode}}"  v-if='type == 1 || type == 2'><span  class='color-blue  text-underline'>{{info_pro.prjName}} {{info_pro.reqName}}</span></router-link>
                      <!-- 产品名称   -->
                      <router-link  :to="{path:'/product/detail',query:{code:isFirst==true? prdCode : info_pro.prdCode}}"  v-if='type == 3 || type == 4'><span  class='color-blue  text-underline'>{{prdName}} {{info_pro.reqName}}</span></router-link>
                  </el-form-item>
                       
                  <el-form-item label="项目类型：" >
                          <span  v-if='info_pro.prjType'>{{info_pro.prjType |  project_type}}</span>
                          <span  v-else>{{info_pro.prdType | project_type}}</span>
                  </el-form-item>
                  <el-form-item label="发行人：" > 
                      <span  v-if='faxing_com!=""'>{{faxing_com}}</span>
                      <span  v-if='info_pro.issuerName!=null'>{{info_pro.issuerName}}</span> 
                      <span  v-if='faxing_com==""  &&  info_pro.issuerName==null'>暂无</span>
                  </el-form-item>
                          
                  <el-form-item label="申请概述：">
                          <el-input type="textarea"  :rows="4"  placeholder="请输入内容"  v-model.trim="form.textarea"></el-input>
                  </el-form-item>

                  <el-form-item label="审批文件：">
                        <el-tabs v-model="activeName_file" type="card" >
                              <el-tab-pane label="资料上传" name="upload">
                                      <el-button type="primary" icon="el-icon-plus" size="small" round  class='mb16' @click='addFiles()'>新增</el-button>
                                      <el-table
                                        :data="filelist"
                                        header-row-class-name='bankheader' 
                                        style="width: 100%">
                                                  <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                                  <el-table-column   label="操作" align='center'>
                                                        <template v-slot="list">
                                                                <el-button  type="primary" size="mini" round @click="downloadFile(list.row.code)">下载</el-button>
                                                                <el-button  type="danger"  size="mini" round @click="fileDelete( list.row.code)">删除</el-button>
                                                        </template>
                                                  </el-table-column>
                                      </el-table>
                              </el-tab-pane>
                              <el-tab-pane label="所需资料模板" name="download"  v-if='type == 1'>
                                      <el-table
                                        :data="filelist2"
                                        header-row-class-name='bankheader' 
                                        style="width: 100%">
                                                  <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                                  <el-table-column   label="操作" align='center'>
                                                        <template v-slot="list">
                                                                <el-button  type="primary" size="mini" round @click="downloadFile(list.row.fileCode)">下载</el-button>
                                                        </template>
                                                  </el-table-column>
                                      </el-table>
                              </el-tab-pane>
                        </el-tabs>
                        
                  </el-form-item>

                  <el-form-item label="审批流程："></el-form-item>
                  <el-form-item  label-width="60px">
                        <img  v-if='isFirst == true'  id="image"  src="static/img/process/common_process.png"  alt='审批流程图' class='w-100  fada'/>
                        
                        <img  v-if='type==1  && isFirst == false'  id="image"  :src='examine_img' alt='立项审批流程图' class='w-100 fada'/>
                        
                        <img  v-if='type==2  && isFirst == false'  id="image"  :src='examine_img' alt='过会审批流程图' class='w-100 fada'/>
                        
                        <img  v-if='type==3  && isFirst == false'  id="image"  :src='examine_img' alt='协议用印审批流程图' class='w-100 fada'/>
                        
                        <img  v-if='type==4  && isFirst == false'  id="image"  :src='examine_img' alt='项目发行审批流程图' class='w-100  fada'/>
                  </el-form-item>

                  <el-form-item label="审批历史：">
                          <span  v-if='isFirst == true  && type == 1'>暂无</span>
                  </el-form-item>
                  <el-form-item  v-if='(isFirst == true  &&  type !=1) || isFirst == false'  label-width="20px">
                          <el-tabs tab-position="top"  v-model="activeName"  @tab-click="handleClick" >
                                  <el-tab-pane label="项目立项"  name='first'>
                                  </el-tab-pane>
                                  <el-tab-pane label="项目过会"  name='second' v-if='type >= 2' >
                                  </el-tab-pane>
                                  <el-tab-pane label="协议用印"  name='third' v-if='type >= 3'>
                                  </el-tab-pane>
                                  <el-tab-pane label="项目发行"  name='fourth'  v-if='type == 4'>
                                  </el-tab-pane>
                          </el-tabs>
                          <el-table
                                  :data="table_history"  class='mt12'  
                                  >
                                  <el-table-column type="expand">
                                        <template slot-scope="props">
                                              <el-form label-position="left" class="demo-table-expand"  v-if='props.row.name.indexOf("申请")!=-1'>

                                                <el-form-item label="申请概述">
                                                  <span>{{ props.row.reqDescription }}</span>
                                                </el-form-item>
                                                <el-form-item label="发起审批文件"  >
                                                    <el-table
                                                      :data="props.row.projectReqFileVOList"  class='mt12 '  style="width: 100%"   border
                                                      >
                                                        <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                                        <el-table-column   label="操作" align='center'  width='200'>
                                                              <template v-slot="list">
                                                                      <el-button  type="primary" size="mini" round @click="checkWord(list.row)">预览</el-button>
                                                                      <el-button  type="primary" size="mini" round @click="downloadFile(list.row.fileCode)">下载</el-button>
                                                              </template>
                                                        </el-table-column>
                                                    </el-table>
                                                </el-form-item>
                                                
                                              </el-form>

                                              <el-form label-position="left" class="demo-table-expand"  v-if='props.row.name.indexOf("审批")!=-1'>
                                                  <el-form-item label="审批意见文件"  >
                                                    
                                                          <el-table   v-if='props.row.fileList'
                                                          :data="props.row.fileList"  class='mt12 '  style="width: 100%"   border
                                                          >
                                                            <el-table-column  prop="name" label="文件名称"  align='center'></el-table-column>
                                                            
                                                            <el-table-column   label="操作" align='center'  width='200'>
                                                                  <template v-slot="list">
                                                                          <el-button  type="primary" size="mini" round @click="checkWord(list.row)">预览</el-button>
                                                                          <el-button  type="primary" size="mini" round @click="downloadFile(list.row.code)">下载</el-button>
                                                                  </template>
                                                            </el-table-column>
                                                        </el-table>
                                                        <span  v-else>暂无</span>
                                                  </el-form-item>
                                                  <el-form-item label="审批人电子签名" label-width='110px' >
                                                        <img  v-if='props.row.signatureImgCode!=null'  :src='sign_img+picUrl(props.row.signatureImgCode)' alt='电子签名图' class='w100'/>
                                                        <span  v-else>暂无</span>
                                                  </el-form-item>
                                              </el-form>
                                        </template>
                                  </el-table-column>
                                  <el-table-column  prop="assigneeUserName" label="审批发起人"  align='center'>
                                      <template slot-scope="scope">
                                                <span  v-if='scope.row.name.indexOf("申请")!=-1'>{{scope.row.assigneeUserName}}</span>
                                      </template>
                                  </el-table-column>
                                  <el-table-column  prop="name" label="操作"  align='center'></el-table-column>
                                  <el-table-column  prop="createTime" label="发起时间"  align='center'>
                                      <template slot-scope="scope">
                                                <span  v-if='scope.row.name.indexOf("申请")!=-1'> {{scope.row.endTime | formatDate}}</span>
                                                <span  v-else>--</span>
                                          </template>
                                  </el-table-column>
                                  <el-table-column  prop="operation" label="审批结果"  align='center'>
                                        <template slot-scope="scope">
                                              <div  v-if='scope.row.name.indexOf("审批")!=-1'>
                                                    <div  v-if=' scope.row.operation == "审批未通过" '  class="color-red"><i class="el-icon-warning-outline  color-red" ></i>不通过</div>
                                                     <div  v-else  class='color-success'><i class="el-icon-circle-check  color-success" ></i>通过</div>
                                              </div>
                                              <span  v-else>--</span>
                                        </template>
                                  </el-table-column>
                                  <el-table-column  prop="opinion" label="审批意见"  align='center'  width='350'>
                                        <template slot-scope="scope">
                                            <span  class='text-left  inline-block'>{{scope.row.opinion}}</span>
                                        </template>
                                  </el-table-column>
                                  <el-table-column  prop="assigneeUserName" label="审批人"  align='center'>
                                        <template slot-scope="scope">
                                              <span  v-if='scope.row.name.indexOf("审批")!=-1'>{{scope.row.assigneeUserName}}</span>
                                              <span  v-else>--</span>
                                        </template>
                                  </el-table-column>
                                  <el-table-column  prop="endTime" label="审批时间"  align='center'>
                                        <template slot-scope="scope">
                                              <span  v-if='scope.row.name.indexOf("审批")!=-1'>{{scope.row.endTime | formatDate}}</span>
                                              <span  v-else>--</span>
                                        </template>
                                  </el-table-column>
                          </el-table>
                  </el-form-item>
                  
            </el-form>
            <div  class="dialog-footer mt42 mb20">
                  <!-- {{isFirst=='true'}} -->
                  <el-button  v-if='isFirst==true' type="primary" @click="submit('form')">发 起</el-button>
                  <el-button  v-if='isFirst==false' type="primary" @click="submit('form','save')"  title='保存当前修改，可稍后再发起审批'>保存修改</el-button>
                  <el-button  v-if='isFirst==false' type="primary" @click="submit('form','sub')"  >再次提审</el-button>
                  <el-button @click="common_goback()">取 消</el-button>
            </div>
        </el-col>
        <!-- 新增 文件 -->
        <FileEdit ref='addFile'  v-on:save='recept(arguments)'> </FileEdit>
  </el-row>
  
</template>

<script>

//接口
import { Exa_setup,detailExamine,sub_modify_Exa,modify_Exa,getExaHistory,getExaHistory_product }  from '@/api/examine/index'
import { detailProject }  from  '@/api/professional_work/project/index'
import { contractList}  from  '@/api/professional_work/contract/index'
import  { getpdfcode }  from '@/api/common/file'/*pdf文件预览*/ 
//组件
import FileEdit  from '@/components/common/FileEdit'

//图片放大缩小插件
import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

export default {
  name: 'project_lift',
  data(){
    return {
        /*active*/
        diagram:'',//审批流程图展示
        form:{
          textarea:'' //审批概述
        },
        //提审显示的项目信息
        info_pro:{

        },
        filelist:[],/*审批意见文件*/
        filelist2:[],
        
        currentPro_Code:'',//当前项目code
        type:null,//审批类型
        faxing_com:'',//发行人

        isFirst:true,//是否是第一次发起申请
        exa_code:'',//如果是再次发起的审批 ， 需要审批code
        examine_img:process.env.BASE_API+'/op/fileupload/download_workflow_img?fileCode=',//审批流程图
        sign_img:'download_file?fileCode=',//电子签名图

        activeName_file:'upload',//上传文件和文件模板 tabs切换操作
        activeName:'first',//流程历史 tab切换
        pro_setup_data:{},//审批历史
        pro_LiftComunty_data:{},
        pro_discussion_data:{},
        pro_issue_data:{},
        hisdata:{},
        table_history:[],
        prjCode:'',//从申请得到的项目code
        prdCode:'',//产品code
        prdName:'',//当前产品名称

        submitSuccess:false,//submit、成功 =>清除缓存；取消编辑 返回上一页 =>仍然保持原页面
    }
  },
  created(){
      [this.type,this.isFirst]= [this.$route.query.type,Boolean(this.$route.query.isFirst)]

      this.pageInit();
  },
  methods:{
    /*初始化 获得申请详情 审批历史 模板文件  S*/
    async pageInit(){
        let that =this
        //如果有code （从项目过来）或者prjcode（从产品过来） ，请求项目prjcode 获得发行人信息
        //第一次  申请  第一次立项申请传入code，第一次产品协议申请传入code+prjCode  用这个判断不好，改成isFirst
        if(this.isFirst){
            // 项目立项&过会
            if(this.type == 1 || this.type == 2){
                this.prjCode = this.$route.query.code //提审时传入项目code
            }
            //产品协议&发行
            if(this.type == 3 ||this.type == 4){
                this.prjCode = this.$route.query.prjCode //请求发行方 和项目类型
                this.prdName = this.$route.query.prdName //审批名称
                this.prdCode = this.$route.query.code //提审时传入的产品code
            }
            //请求项目详情，一是为了 获得发行方和项目类型，二是为了获得历史审批信息
            await detailProject(this.prjCode).then(res=>{
                if(res.data.flag == true){
                    this.info_pro = res.data.data //审批信息
                    this.info_pro.projectEntList.forEach((item)=>{
                        if(item.entRole == 1){
                            this.faxing_com = item.entName//发行方
                        }
                    })
                }
            })
            .catch(error => {
                that.outputError(error)
            })
        }
                
        //如果有审批code 直接获得原来的审批信息
        if(!this.isFirst){
            this.exa_code = this.$route.query.itemcode
            let url ='';
            
            if(this.type == 1){
                url='/op/project_req/get_project_req'//立项
            }
            if(this.type == 2){
                url='/op/project_meeting_req/get_project_meeting_req'//获取指定的项目过会申请
            }
            if(this.type == 3){
                url='/op/product_agreement_stamp_req/get_product_agreement_stamp_req'//获取指定的产品协议用印申请
            }
            if(this.type == 4){
                url='/op/product_release_req/get_product_release_req'//获取指定的项目发行申请
            }

            /*获取审批信息*/
            await detailExamine(this.exa_code,url).then(res=>{
                if(res.data.flag == true){
                    this.info_pro = res.data.data

                    this.form.textarea = res.data.data.reqDescription
                    this.filelist = res.data.data.reqFileList

                    this.examine_img+=this.info_pro.processDiagramCode
                    this.prjCode =res.data.data.prjCode

                    if(this.info_pro.prdCode!=null){
                      this.prdCode = this.info_pro.prdCode
                    }
                }
            })
            .catch(error=>{
                    that.outputError(error)
            })
        }

        // console.log(this.prjCode) 获得项目历史
        await getExaHistory(this.prjCode).then(res=>{
            if(res.data.flag == true){
                this.pro_setup_data = res.data.data.projectReqVO
                this.pro_LiftComunty_data = res.data.data.projectMeetingReqVO

                if(this.type == 1){
                    this.hisdata = this.pro_setup_data
                    this.activeName = 'first'
                }
                if(this.type == 2 ){
                  this.hisdata = this.pro_LiftComunty_data
                  this.activeName = 'second'
                  // console.log(this.hisdata)
                }
                if(this.type<3){
                    if(this.hisdata !=null){
                      this.filelist = this.hisdata.reqFileList/*过会时候之前的审批文件*/
                        /*当前查看历史记录表对应的记录*/
                        this.table_history = this.hisdata.reqHis
                    }
                    if(this.hisdata ==null){
                        this.table_history = []
                        return 
                    }  
                }
                
            }
          })
        /*type》3 获得产品审批历史*/
        if(this.type>2){
            await getExaHistory_product(this.prdCode).then(res=>{
                if(res.data.flag == true){
                    this.pro_discussion_data = res.data.data.productAgreementStampReqVO
                    this.pro_issue_data = res.data.data.productReleaseReqVO

                    if(this.type ==3){
                        this.activeName = 'third'
                        this.hisdata = this.pro_discussion_data
                    }
                    if(this.type ==4){
                      this.activeName = 'fourth'
                      this.hisdata = this.pro_issue_data
                    }

                    
                    if(this.hisdata !=null){
                      this.filelist = this.hisdata.reqFileList
                      this.table_history = this.hisdata.reqHis
                    }
                    if(this.hisdata ==null){
                        this.table_history = []
                        return 
                    }
                }
            })
            .catch(error=>{

            })
        }

        /*获得立项审批模板文件*/
        if(this.type == 1){
            await contractList({pageSize:100,pageNo:1,dirCode:'root'}).then(res=>{
              if(res.data.flag == true){
                  res.data.dataList.forEach((item)=>{
                      if(item.name='立项申请文件模版'){
                          contractList({pageSize:100,pageNo:1,dirCode:item.code}).then(response=>{
                              if(response.data.flag == true){
                                  this.filelist2 = response.data.dataList
                              }
                          })
                      }
                  })
                }
            })
            .catch(error=>{
              
            })
        }
        
    },
    /*初始化 获得申请详情 审批历史 模板文件  E*/

    /*SUBMIT 第一次提交  || 打回后修改  || 打回后修改提交 S*/
    async submit(form,method){
        this.$store.commit('showLoading') 

        if(this.isFirst == true){
              let reqName
              let url
              if(this.type == 1){
                   reqName = '立项申请 — '+this.info_pro.prjName
                   url='/op/project_req/create_project_req'
              }
              if(this.type == 2){
                   reqName = '过会申请 — '+this.info_pro.prjName
                   url='/op/project_meeting_req/create_project_meeting_req'
              }
              if(this.type == 3){
                   reqName = '协议用印申请 — '+this.prdName
                   url='/op/product_agreement_stamp_req/create_product_agreement_stamp_req'//产品用印申请
              }
              if(this.type == 4){
                   reqName = '发行申请 — '+this.prdName
                   url='/op/product_release_req/create_product_release_req'//发起 产品发行申请'
              }
              
              await Exa_setup(url,this.prjCode,this.prdCode,this.filelist,this.form.textarea,reqName).then(res=>{
                  if(res.data.flag == true){
                      /*是否需要列表页清除缓存*/
                      this.submitSuccess = true
                      this.$message({type:'success',message:res.data.msg})
                      if(this.type < 3){
                          this.$router.push({name:"item"})
                      }
                      else{
                          this.$router.push({name:"product"})
                      }
                  }
              })
              .catch(error=>{

              })
              this.$store.commit('hideLoading')
        }

        //打回后修改
        //修改
        if(method == 'save'){
              let url,reqName;
              if(this.type == 1 ){
                  url='/op/project_req/modify_project_req'//修改 项目立项申请
              }
              if(this.type == 2 ){
                  url='/op/project_meeting_req/modify_project_meeting_req'//修改 项目过会申请
              }
              if(this.type == 3 ){
                  url='/op/product_agreement_stamp_req/modify_product_agreement_stamp_req'//修改 产品协议用印申请
              }
              if(this.type == 4 ){
                  url='/op/product_release_req/modify_product_release_req'//修改 产品发行申请
              }
              await modify_Exa(url,this.exa_code,this.filelist,this.form.textarea).then(res=>{
                  if(res.data.flag == true){
                    this.$message({type:'success',message:res.data.msg})
                    if(this.type < 3){
                        this.$router.push({name:"item"})
                    }
                    else{
                        this.$router.push({name:"product"})
                    }
                  }
              })
              .catch(error=>{

              })

              this.$store.commit('hideLoading')
        }
        //修改并提审
        if(method == 'sub'){
                let url,reqName;
                if(this.type == 1 ){
                    url='/op/project_req/modify_project_req_and_submit'//修改 项目立项申请并提审
                   
                }
                if(this.type == 2 ){
                    url='/op/project_meeting_req/modify_project_meeting_req_and_submit'//修改 项目过会申请并提审
                   
                }
                if(this.type == 3 ){
                    url='/op/product_agreement_stamp_req/modify_product_agreement_stamp_req_and_submit'//修改 协议用印申请并提审
                    
                }
                if(this.type == 4 ){
                    url='/op/product_release_req/modify_product_release_req_and_submit'//修改 发行申请并提审
                    
                }
                await sub_modify_Exa(url,this.exa_code,this.filelist,this.form.textarea).then(res=>{
                    // console.log(res)
                    if(res.data.flag == true){
                      /*是否需要列表页清除缓存*/
                      this.submitSuccess = true
                      this.$message({type:'success',message:res.data.msg})
                      if(this.type < 3){
                          this.$router.push({name:"item"})
                      }
                      else{
                          this.$router.push({name:"product"})
                      }
                      
                    }
                })
                .catch(error=>{

                })
                this.$store.commit('hideLoading')
        }
    },
    /*SUBMIT 第一次提交  || 打回后修改  || 打回后修改提交 E*/

    /*表格操作 S*/
    //新增文件
    addFiles(){
        this.$refs.addFile.$emit('openDialog')
    },
    //接收已经上传的文件，并返回列表
    recept(arg){
        let  form = arg[0] 
        console.log(this.filelist)
        form.forEach((item,index)=>{
          this.filelist.push({name:item.name,fileCode:item.code})
        })
          
    },
    //删除文件（新增时删除）
    fileDelete(index,row){
      this.common_del(index,this.filelist)
    },
    checkWord(row){
        // getpdfcode(code)
      let pdfStr = row.name.search(/pdf/ig)
      if(pdfStr !=-1){
        /*pdf文档*/
        window.open('download_file?fileCode='+row.fileCode+'&token='+sessionStorage.getItem('tokenId')+'&isRead=1')
      }
      else {
        //doc文档
        getpdfcode(row.code)
      }

    },
    //审批历史 tab切换
    handleClick(tab, event) {
        
        if(tab.name == 'first'){
            this.hisdata = this.pro_setup_data
        }
        if(tab.name == 'second' ){
            this.hisdata = this.pro_LiftComunty_data
        }
        if(tab.name == 'third'){
            this.hisdata = this.pro_discussion_data
        }
        if(tab.name == 'fourth'){
            this.hisdata = this.pro_issue_data
        }

        if(this.hisdata ==null){
            this.table_history = []
            return 
        }
            this.table_history = this.hisdata.reqHis
    },
    /*表格操作 E*/
   
  },
  components:{
    FileEdit
  },
  mounted(){
      // View an image
      const viewer = new Viewer(document.getElementById('image'), {
        inline: false,
        'button':false, //右上角按钮
        "navbar": false, //底部缩略图
        "title": true, //当前图片标题
        "toolbar": false, //底部工具栏
        "tooltip": true, //显示缩放百分比
        "movable": true, //是否可以移动
        "zoomable": true, //是否可以缩放
        "rotatable": false, //是否可旋转
        "scalable": false, //是否可翻转
        "transition": true, //使用 CSS3 过度
        "fullscreen": true, //播放时是否全屏
        "keyboard": true, //是否支持键盘
        viewed() {
          viewer.zoomTo(1);
        },
      });
  },
  computed:{
      picUrl(img_latter){
        let tokenId = sessionStorage.getItem('tokenId') 
        // return img_latter
        return function(value) {
          return value+'&token='+tokenId
        }
      }
  },
  beforeRouteLeave(to,from,next){
      /*提交时不需缓存*/
      from.meta.modifyCacheRoute = this.submitSuccess == true ? true :false
      next()
  }
}
</script>

<style>
.viewer-canvas > img{background: #fff;}

</style>

